<template>
  <!-- 引入并使用自定义导航栏组件 -->
  <custom-navbar title="我的地址" show="true"></custom-navbar>
  <!-- 页面内容区域，确保内容不被导航栏遮挡 -->
  <scroll-view scroll-y="true" class="contentBox">
	  <view v-for="(item,index) in 3" :key="index" class="list-item-view" @click="chooseAddress">
	  	<uni-swipe-action-item :right-options="options"  @click="onClick" >
	  			<view style="display: flex;flex-direction: column;padding: 30rpx;">
	  				<text>张三 15829646496</text>
	  				<text style="color: darkgray;margin-top: 20rpx;">陕西省铜川市耀州区</text>
	  			</view>
	  	</uni-swipe-action-item>
	  </view>
   </scroll-view>
   <view class="bottom-view" @click="addAddress" v-if="isChoose==0">
   	新增
   </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar.vue';

export default {
  components: {
    CustomNavbar,
  },
  onLoad(option) {
  	this.isChoose = option.isChoose || 0;
	console.log('========='+this.isChoose);
  },
  data () {
	  return {
		isChoose: 0,
		options: [{
			text: '编辑',
			style: {
				backgroundColor: '#007aff'
			}
		}, {
			text: '删除',
			style: {
				backgroundColor: '#dd524d'
			}
		}]
	  }
  },
  methods: {
	  chooseAddress() {
		  if(this.isChoose==1){
		  	uni.navigateBack()
		  }
	  },
		addAddress(addressId) {
			uni.navigateTo({
				url:`/pages/mine/addressEdit`
			})
			  
		},
		onClick(e) {
			if(e.content.text=='编辑'){
				uni.navigateTo({
					url:`/pages/mine/addressEdit`
				})
			}else if(e.content.text=='删除'){
				uni.showModal({
				  title: '提示',
				  content: '是否删除此地址？',
				  showCancel: true,
				  cancelText: '取消',
				  confirmText: '确定',
				  success: function (res) {
				    if (res.confirm) {
				      console.log('用户点击确定');
				    } else if (res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});

			}
		},
  }
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}
.contentBox {
  /* 确保内容不被导航栏遮挡 */
  flex-grow: 1;
  height: 1rpx;
  margin: 20rpx;
  width: calc(100% - 40rpx);
}
.list-item-view {
	background-color: white;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.bottom-view {
	height: 100rpx;
	background-color: red;
	padding-bottom: 20rpx;
	text-align: center;
	color: white;
	font-size: 36rpx;
	line-height: 100rpx;
	font-weight: bold;
}
</style>

